{% extends 'base.html' %}

  {% block title %}
    Coordinates on a map - pick GPS lat & long or coordinates in a projection system
  {% endblock %}

  {% block description %}
    Transform coordinates for position on a map - converting latitude / longitude degrees
  {% endblock %}

  {% block keywords %}
    map, epsg, coordinates, latitude, longitude, degrees
  {% endblock %}

  {% block head %}
    <script src="{{ url_for('static', filename='js/map.js') }}"></script>
  {% endblock %}

  {% block body %}
    <body id="map-template">
  {% endblock %}

  {% block navbar %}
     <div id="navbar-top" class="nav-background">
<a class="logo" href="/"><img class="padt-2 marx-4 marr-0" src="/static/img/espg-logo.png" alt="EPSG logo"><p class="inline">From MapTiler Team</p></a>           <div id="copy-clipboard-container">
             <div id="copy-bg"></div>
             <form id="eastnorth_form" method="post" action="#">
               <input id="easting" type="text" name="easting" value="" />
               <input id="northing" type="text" name="northing" value="" />
               <a id="eastnorth_copy" title="" class="btn padx-2">Copy</a><!--
            --><a id="crs-transform-link" href="/transform" title="" class="btn padx-1 marx-1">Transform</a>
               <input class="hidden" type="submit" id="eastnorth_submit" value="">
             </form>
           </div>
         <div class="nav marx-4">
           <a href="/?q=">Search</a>
           <a href="/map" title="">Map</a>
           <a href="/transform" title="">Transform</a>
           <a href="/about" title="">About</a>
         </div>
         <div class="nav-mobile">
           <div id="nav-mobile-btn">L</div>
           <div id="nav-mobile-nav">
             <a href="/?q=">Search</a>
             <a href="/map" title="">Map</a>
             <a href="/transform" title="">Transform</a>
             <a href="/about" title="">About</a>
           </div>
       </div>
     </div>
     <div class="row padb-10"></div>
  {% endblock %}

{% block content %}


<div class="row">
  <div class="container">
    <div id="map-plus">+</div>
    <div id="map-minus">-</div>
    <div id="map-search" class="hidden">q</div>
    <div id="reproject_map_container" class="inline bg-white border-gray-light ">
      <input type="checkbox" id="reproject_map" class="marx-1 marl-0"><label class="mar-0 prip" for="reproject_map">Reproject Map</label>
    </div>
    <select id="mapType">
      <option value="streets" data-tilejson="https://api.maptiler.com/maps/streets/256/tiles.json?key=Pv8X48h6LIafuFmSomha">Streets</option>
      <option value="satellite" data-tilejson="https://api.maptiler.com/maps/hybrid/256/tiles.json?key=Pv8X48h6LIafuFmSomha">Satellite</option>
      <option value="osm">OSM</option>
    </select>
    <div id="mapsight"></div>
    <div id="map"></div>


    <div id="search-container">
      <p>
        <form><input class="" type="search" name="geocoder" id="geocoder" placeholder="Place or address" /></form>
      </p>
    </div>
    <div id="map-clipboard-container" class="bg-white border-gray-light inline pady-1 padx-1">
      <div id="mc-info-container">
        <h5 class="inline mart-0">Coordinate system</h5>
        <a href="#" id="crs-change" class="btn-small padx-1 marr-0 float-right">Change</a>
        <a id="crs-detail-link" href="#" title="">
          <h2 id="crs-title"></h2>
        </a>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  new MapPage;

  // XXX
  new ClipboardJS('#eastnorth_copy', {
    text: function(trigger) {
        return document.getElementById('easting').value + ' ' + document.getElementById('northing').value;
    }
  });
</script>
{% endblock %}
